<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">

          <!--搜索-->
          <el-input placeholder="请输权限名称"  v-model="name">
            <el-button slot="append" icon="el-icon-search" @click.prevent="getPermissionList(name)"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加权限</el-button>
        </el-col>
      </el-row>
      <el-table :data="permissionList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="权限名称" prop="permissionName"></el-table-column>
        <el-table-column label="权限路径" prop="url"></el-table-column>
        <el-table-column label="权限类型" prop="">
          <template slot-scope="sc">{{sc.row.urlType==1?'菜单权限':'接口权限'}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click.prevent="showEditDialog(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click.prevent="removePermissionById(scope.row.permissionId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10 , 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>


    <!--添加权限-->
    <el-dialog
      title="添加权限"
      :visible.sync="addDialogVisible"
      width="50%"

    >
      <el-form
        :model="addPermissionForm"
        :rules="addPermissionFormRules"
        ref="add1"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="权限名称" prop="permissionName">
          <el-input v-model="addPermissionForm.permissionName"></el-input>
        </el-form-item>

        <el-form-item label="权限路径" prop="url">
          <el-input v-model="addPermissionForm.url"></el-input>
        </el-form-item>

        <el-form-item label="上级菜单" prop="parentId">
          <el-select v-model="addPermissionForm.parentId"  placeholder="请选择上级菜单">
            <el-option
              :label="item.permissionName"
              :value="item.permissionId"
              :key="item.permissionId"
              v-for="item in allRoleMenuList"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="权限类型" prop="urlType" >
          <el-select v-model="addPermissionForm.urlType" placeholder="请权限类型">
            <el-option label="菜单权限" value="1"></el-option>
            <el-option label="接口权限" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.prevent="addRule()">确 定</el-button>
        <el-button @click.prevent="closeAddForm()">取 消</el-button>
      </span>
    </el-dialog>


    <!--修改权限-->
    <el-dialog
      title="修改权限"
      :visible.sync="editDialogVisible"
      width="50%"
    >
      <el-form
        :model="editPermissionForm"
        :rules="editPermissionFormRules"
        ref="edit1"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="权限名称" prop="permissionName">
          <el-input v-model="editPermissionForm.permissionName"></el-input>
        </el-form-item>
        <!--editPermissionForm.url!=null&&editPermissionForm.url!=''-->
        <el-form-item label="权限路径" prop="url" v-if="editPermissionForm.url!=null&&editPermissionForm.url!=''">
          <el-input v-model="editPermissionForm.url"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentId" v-if="editPermissionForm.url!=null&&editPermissionForm.url!=''">
          <el-select v-model="editPermissionForm.parentId" >
            <el-option
              v-for="item in allRoleMenuList"
              :label="item.permissionName"
              :value="item.permissionId"
              :key="item.permissionId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="权限类型" prop="urlType">
          <el-select v-model="editPermissionForm.urlType">
            <el-option label="菜单权限" :value="1"></el-option>
            <el-option label="接口权限" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editRule()">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>


</template>
<script>


export default {
  data() {
    return {
      editDialogVisible: false,
      pageNum: 1,
      pageSize: 5,
      total:0,
      prePage:1,
      nextPage:1,
      pages:0,
      permissionList: [],
      allRoleMenuList: [], //菜单权限下拉列表
      total: 0,
      name: "", //权限名称
      addDialogVisible: false,
      urlTypeDesc: "菜单权限",
      addPermissionForm: {
          permissionName: "",
          permissionCode: "",
          url: "",
          parentId: "",
          urlType: null,

      },
      editPermissionForm: {
          permissionId: -1,
          permissionName: "",
          permissionCode: "",
          parentId: "",
          url: "",
          urlType: null,

      },
      editPermissionFormRules: {
          permissionName: [
              { required: true, message: "请输入权限名称", trigger: "blur" },
              {min: 1, max: 5, message: "权限名称在1-20個字符之間", trigger: "blur"}
          ],
          parentId: [
              { required: true, message: "请选择上级菜单", trigger: "blur" },
          ],
          url: [
              { required: true, message: "请输入权限路径", trigger: "blur" },
              {min: 1, max: 20, message: "权限路径必须是3~100个字符之间", trigger: "blur"}
          ],
          urlType: [
              { required: true, message: "请选择权限类型", trigger: "blur" }
          ],
       },
        // ?
      addPermissionFormRules: {
          permissionName: [
          { required: true, message: "请输入权限名称", trigger: "blur" },
          {min: 1, max: 5, message: "权限名称在1-20個字符之間", trigger: "blur"}
        ],
        parentId: [
          { required: true, message: "请选择上级菜单", trigger: "blur" },

      ],
        url: [
            { required: true, message: "请输入权限路径", trigger: "blur" },
            {min: 1, max: 20, message: "权限路径必须是3~100个字符之间", trigger: "blur"}
        ],
          urlType: [
          { required: true, message: "请选择权限类型", trigger: "blur" }
        ],
      }
    };
  },
  methods: {
      editRule(){
          this.$refs.edit1.validate((valid)=>{
              if(valid){
                  this.editPermission()
              }else {
                  return ;
              }
          })
      },
      addRule(){
          this.$refs.add1.validate((valid)=>{
              if(valid){
                  this.addPermission()
              }else {
                  return ;
              }
          })
      },
      closeAddForm(){
          this.addDialogVisible = false
          Object.keys(this.addPermissionForm).forEach(key => (this.addPermissionForm[key] = ''));
      },
    // 删除权限信息
    async removePermissionById(id) {
      const res = await this.$confirm(
        "此操作将永久删除该权限, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);

      if ("confirm" === res) {
          let url=this.$baseUrl+"/permission/delete?id="+id
        this.axios.delete(url)
          // .removePermission(id)
          .then(res => {
            if (res.data.code == "200") {
                this.$message.success("删除成功");
            }
              this.getPermissionList()
          })
          .catch(err => {
            this.$message.error("服务端异常，请联系管理员");
          });
      } else {
        this.$message.info("取消删除");
      }
    },

    showEditDialog(row) {
      this.editDialogVisible = true;
      this.editPermissionForm.permissionId = row.permissionId;
      this.editPermissionForm.permissionName = row.permissionName;
      this.editPermissionForm.url = row.url;
      this.editPermissionForm.permissionCode = row.permissionCode;
      this.editPermissionForm.urlType = row.urlType;
      this.editPermissionForm.parentId = row.parentId;

    },

    editPermission() {
        let url=this.$baseUrl+"/permission/update"
        this.axios.put(url,JSON.stringify(this.editPermissionForm)).then((data)=>{
            if(data.data.code==200){
                this.editDialogVisible = false;
                this.$message.success("更新成功");

            }else {
                this.$message.error("服务端异常，请联系管理员");
            }
            this.getPermissionList()

        })

    },
    addPermission() {
        let url=this.$baseUrl+"/permission/add"
        this.addDialogVisible = false;
        this.axios.post(url,JSON.stringify(this.addPermissionForm)).then((data)=>{
            if(data.data.code==200){
                this.$message.success("添加成功");

            }else {
                this.$message.error("服务端异常，请联系管理员");
            }
            Object.keys(this.addPermissionForm).forEach(key => (this.addPermissionForm[key] = ''));
            this.getPermissionList();
        })

    },findParent(){
          let url=this.$baseUrl+"/permission/findParent"
          this.axios.get(url,{

          }).then((data)=>{
              this.allRoleMenuList=data.data.data
              console.log(this.allRoleMenuList)





          })
      },

    getPermissionList(name) {
        let url=this.$baseUrl+"/permission/findAllPermission"
      this.axios.get(url,{
          params:{
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              name:name
          }
        })
        .then(res => {
          if (res.data.code != "200") {
            this.$message.error("查询权限失败");
          } else {
            this.pageNum = res.data.data.pageNum;
            this.pageSize = res.data.data.pageSize;
            this.total = res.data.data.total;
            this.permissionList = res.data.data.list;
            this.prePage = res.data.data.prePage;
            this.nextPage = res.data.data.nextPage;
            this.pages=res.data.data.pages;




          }
        });
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getPermissionList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getPermissionList();
    },
  //   //新增菜单权限的时候，用于显示上级菜单列表，只查询一级菜单，因为系统只支持两级菜单
  //   getFirstLevelMenuList() {
  //
  //     this.$api.permission.getRoleMenuListWithListReturning().then(res => {
  //
  //       if (res.data.code !== "0000") {
  //         this.$message.error("查询菜单权限失败");
  //       } else {
  //         if (res.data.result) {
  //           this.allRoleMenuList = [{id:-1,name:'无'}];
  //           let j = 1;
  //           for (let i = 0 ;i < res.data.result.length;i++) {
  //               if(res.data.result[i].parentId == -1){
  //                   this.$set(this.allRoleMenuList, j, res.data.result[i]);
  //                   j++;
  //               }
  //           }
  //         }
  //       }
  //     });
  //   },

  //   reloadData(){
  //     this.searchPermission();
  //     this.getFirstLevelMenuList();
  //   }
  },
  created() {
      this.findParent()
    this.getPermissionList();
  }
};
</script>
<style lang="less" scoped>
</style>